<template>
  <div class="Category">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button size="medium" type="primary" plain @click="adkks(1)"
          >待审核</el-button
        >
        <el-button size="medium" type="primary" plain @click="adkks(2)"
          >已通过</el-button
        >
        <el-button size="medium" type="primary" plain @click="adkks(3)"
          >审核失败</el-button
        >
      </div>

      <div>
        <el-input
          style="width: 250px"
          v-model="input"
          placeholder="输入姓名,手机号,身份证进行搜索"
        ></el-input>
        <!-- 搜索 -->
        <el-button
          icon="el-icon-search"
          circle
          style="margin-left: 20px"
          @click="likeEmployee()"
        ></el-button>
      </div>
    </div>

    <div class="goods-table">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        style="width: 100%"
        height="100%"
      >
        <el-table-column prop="i" label="序号" fixed="left" width="80"> </el-table-column>
        <!-- <el-table-column prop="userId" label="用户id" fit width="80"> -->
        </el-table-column>
        <el-table-column prop="employeeName" label="姓名" fit width="80">
        </el-table-column>
        <el-table-column prop="employeeSex" label="性别" fit width="60">
        </el-table-column>
        <el-table-column
          prop="employeeBirthday"
          label="出生日期"
          fit
          width="100"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.employeeBirthday) }}
          </template>
        </el-table-column>
        <el-table-column prop="employeeAge" label="年龄" fit width="60">
        </el-table-column>
        <el-table-column prop="employeeIdcard" label="身份证" fit width="180">
        </el-table-column>
        <el-table-column prop="employeeEmail" label="手机号" fit width="120">
        </el-table-column>
        <el-table-column
          prop="employeeEntryDate"
          label="入职日期"
          fit
          width="100"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.employeeEntryDate) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="employeeLeaveDate"
          label="离职日期"
          fit
          width="100"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.employeeLeaveDate) }}
          </template>
        </el-table-column>
        <el-table-column label="合同图片" width="120">
          <template slot-scope="item">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :src="item.row.employeeContractFile"
                :preview-src-list="srcList"
                :fit="cover"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="保密协议图片" width="120">
          <template slot-scope="item">
            <div>
              <el-image
                :fit="cover"
                style="width: 100px; height: 100px"
                :src="item.row.employeeSecrecyFile"
                :preview-src-list="srcList"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="employeeContractDate"
          label="合同到期日期"
          fit
          width="120"
        >
          <template slot-scope="scope">
            {{ formatDate(scope.row.employeeContractDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="employeeStatus" label="在职状态" fit width="100">
          <template slot-scope="scope">
            <!-- {{ employeeStatuse(scope.row.employeeStatus) }} -->
            <el-tag size="medium" v-if="scope.row.employeeStatus == 0">{{
              employeeStatuse(scope.row.employeeStatus)
            }}</el-tag>
            <el-tag
              v-if="scope.row.employeeStatus == 1"
              size="medium"
              color="#F67A7A"
              style="color: white"
              >{{ employeeStatuse(scope.row.employeeStatus) }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="employeeUpdateStatus"
          label="职工修改状态"
          fit
          width="120"
        >
          <template slot-scope="scope">
            <el-tag
              size="medium"
              effect="dark"
              color="white"
              style="color: #3c3c3c"
              v-if="scope.row.employeeUpdateStatus == 1"
              @click="applyUpdateEmployee(scope.row.id)"
              >{{
                employeeUpdateStatuse(scope.row.employeeUpdateStatus)
              }}</el-tag
            >
            <el-tag
              size="medium"
              effect="dark"
              v-if="scope.row.employeeUpdateStatus == 2"
              >{{
                employeeUpdateStatuse(scope.row.employeeUpdateStatus)
              }}</el-tag
            >

            <el-tag
              size="medium"
              effect="dark"
              color="#F67A7A"
              style="color: white"
              v-if="scope.row.employeeUpdateStatus == 3"
              >{{
                employeeUpdateStatuse(scope.row.employeeUpdateStatus)
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="employeeUpdateCount"
          label="职工修改次数"
          fit
          width="120"
        >
        </el-table-column>

        <!-- 进行中 未开始 已结束 -->
        <!-- <el-table-column prop="saleState" label="状态" fit width="100">
                    <template slot-scope="scope">
                        
                        <el-tag type="success"></el-tag>
                    </template>
                </el-table-column> -->
        <el-table-column prop="userId" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="Employeeupda(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              v-if="roleType"
              size="mini"
              type="danger"
              @click="deleteGoods(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 新增员工档案信息 -->
    <el-dialog
      style="margin-top: 0"
      :visible.sync="addFromDialog"
      width="60%"
      :show-close="false"
      :title="title"
    >
      <!--  -->
      <el-form
        :model="addEmployeeForm"
        :inline="true"
        ref="addEmployeeForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="职工姓名" prop="employeeName">
          <el-input
            type="text"
            v-model="addEmployeeForm.employeeName"
            placeholder="职工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="employeeSex">
          <!-- <el-input type="text" v-model="addEmployeeForm.goodsName" placeholder="商品名称" ></el-input> -->
          <el-select v-model="addEmployeeForm.employeeSex" placeholder="性别">
            <el-option
              v-for="item in SexCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="employeeAge">
          <el-input
            type="text"
            v-model="addEmployeeForm.employeeAge"
            placeholder="年龄"
          ></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="employeeIdcard">
          <el-input
            type="text"
            v-model="addEmployeeForm.employeeIdcard"
            placeholder="身份证号"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="employeeEmail">
          <el-input
            type="text"
            v-model="addEmployeeForm.employeeEmail"
            placeholder="手机号"
          ></el-input>
        </el-form-item>

        <el-form-item label="在职状态" prop="employeeStatus">
          <!-- <el-input type="text" v-model="addEmployeeForm.goodsName" placeholder="商品名称" ></el-input> -->
          <el-select
            v-model="addEmployeeForm.employeeStatus"
            placeholder="在职状态"
          >
            <el-option
              v-for="item in employeeStatusCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="职工出生日期" prop="startTime">
          <el-date-picker
            v-model="addEmployeeForm.startTime"
            type="datetime"
            placeholder="职工出生日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="职工入职日期" prop="employeeEntryDate">
          <el-date-picker
            v-model="addEmployeeForm.employeeEntryDate"
            type="datetime"
            placeholder="职工入职日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="职工离职日期" prop="employeeLeaveDate">
          <el-date-picker
            v-model="addEmployeeForm.employeeLeaveDate"
            type="datetime"
            placeholder="职工离职日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="合同到期日期" prop="employeeContractDate">
          <el-date-picker
            v-model="addEmployeeForm.employeeContractDate"
            type="datetime"
            placeholder="合同到期日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="合同到期提醒">
          <el-switch
            v-model="htdz"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="合同图片" prop="employeeContractFile">
          <div
            style="
              display: flex;
              padding: 0rem;
              border: dashed 1px #c0c4cc;
              border-radius: 5px;
            "
          >
            <img :src="imageUrl" class="htimg" @click="selectFile(1)" />
          </div>
        </el-form-item>

        <el-form-item label="保密协议图片" prop="employeeSecrecyFile">
          <div
            style="
              display: flex;
              padding: 0rem;
              border: dashed 1px #c0c4cc;
              border-radius: 5px;
            "
          >
            <img :src="imageUrl2" class="htimg" @click="selectFile(2)" />
          </div>

          <input
            type="file"
            id="fileInput"
            ref="fileInput"
            style="display: none"
            @change="handleFileChange"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="applyButton == 0"
          @click="submitaddEmployeeForm"
          >确 定</el-button
        >
        <el-button
          type="primary"
          v-if="applyButton == 1"
          @click="UpdateEmployee(1)"
          >修 改</el-button
        >
        <el-button
          type="primary"
          v-if="applyButton == 2"
          @click="UpdateEmployee(2)"
          >申请修改</el-button
        >
        <el-button
          type="primary"
          v-if="applyButton == 3"
          @click="ReviewArchives(true)"
          >通 过</el-button
        >
        <el-button
          type="danger"
          v-if="applyButton == 3"
          @click="ReviewArchives(false)"
          >不通过</el-button
        >
        <el-button @click="addFromDialog = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  getGoodsCategory,
  addEmployeeProfile,
  deleteEmployeeProfileById,
  selectEmployeeProfileById,
  UploadFile,
  updateEmployeeProfile,
  updateEmployeeUpdateStatus,
  selectEmployeeProfileByState,
  selectEmployeeProfileByStateLike,
} from "../../api/all";
export default {
  components: {},
  data() {
    return {
      // 搜索框
      input: "",
      // 图片预览
      srcList: [],
      srcList2: [],
      //修改按钮状态
      applyButton: 0, //0是新增 1是修改，2是申请修改
      // 上传图片文件
      selectedFile: null,
      //判断用户点击的是合同还是保密协议
      htdz: "",
      ExamineType: -1,
      // 合同地址
      imageUrl: "",
      // 保密协议地址
      imageUrl2: "",
      //新增标题
      title: "新增档案信息",
      roleType: false,
      cover: "cover",
      // 显示表单
      addFromDialog: false,
      // 表格加载
      loading: false,
      //合同到期提醒
      hetong: false,
      dialogImageUrl: "",
      dialogVisible: false,
      //表格数据
      tableData: [
        {
          id: "",
          userId: "",
          employeeName: "",
          employeeSex: 0,
          employeeBirthday: null,
          employeeAge: 0,
          employeeIdcard: "",
          employeeEmail: "",
          employeeEntryDate: "",
          employeeLeaveDate: "",
          employeeContractDate: "",
          employeeContractFile: "",
          employeeSecrecyFile: "",
          employeeStatus: 0,
          employeeUpdateStatus: 0,
          employeeUpdateCount: 0,
          createTime: "",
          updateTime: "",
        },
      ],
      // 新增员工档案信息
      addEmployeeForm: {
        id: "",
        userId: "",
        employeeName: "",
        employeeSex: 0,
        employeeBirthday: null,
        employeeAge: 0,
        employeeIdcard: "",
        employeeEmail: "",
        employeeEntryDate: "",
        employeeLeaveDate: "",
        employeeContractDate: "",
        employeeContractFile: "",
        employeeSecrecyFile: "",
        employeeStatus: 0,
        employeeUpdateStatus: 0,
        employeeUpdateCount: 0,
        createTime: "",
        updateTime: "",
      },
      //总数页
      total: 1,
      // 分页大小
      pageSize: 20,
      //记录当前页数
      currentPage: 1,
      //审核通过状态
      applyStatus: false,
      // 商品分类
      SexCategory: [
        { label: "男", value: 0 },
        { label: "女", value: 1 },
      ],
      //在职信息
      employeeStatusCategory: [
        { label: "在职", value: 0 },
        { label: "离职", value: 1 },
      ],
    };
  },
  mounted() {
    let kes = window.sessionStorage.getItem("loginUser");
    let userObject = JSON.parse(kes);
    if (userObject.roleType == "root") {
      this.roleType = true;
    }
    console.log("userObject", userObject.roleType);
    this.getAllGoods();
    // console.log("初始化时间:", dayjs())
  },
  //超级管理员显示功能
  methods: {
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      //   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return `${year}-${month}-${day}`;
    },
    startTimeChange(value) {
      this.addEmployeeForm.startTime = dayjs(value).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    endTimeChange(value) {
      this.addEmployeeForm.endTime = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
      console.log("上架时间", dayjs(value).format("YYYY-MM-DD HH:mm:ss"));
    },
    // 提交新增员工档案信息表单
    submitaddEmployeeForm() {
      addEmployeeProfile(this.addEmployeeForm).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: "新增成功",
          });
          this.getAllGoods();
        } else {
          this.$message({
            type: "error",
            message: "新增失败",
          });
        }
      });
      this.addFromDialog = false;
    },
    //模糊查询
    likeEmployee() {
      selectEmployeeProfileByStateLike(this.input, this.ExamineType).then(
        (data) => {
          if (data.code) {
            this.tableData = data.data.map((item,index) =>{
				item.i = index+1;
				return item;
			});
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        }
      );
    },
    //修改档案信息
    UpdateEmployee() {
      let val = this.infoPet();
      if (val == false) {
        return;
      }
      updateEmployeeProfile(this.addEmployeeForm).then((data) => {
        if (data.code) {
          this.$message({
            type: "success",
            message: data.data,
          });
          this.getAllGoods();
          this.addFromDialog = false;
        } else {
          this.$message({
            type: "error",
            message: data.message,
          });
        }
      });
    },
    //审核档案信息
    applyUpdateEmployee(id) {
      this.imgstatus();
      let kes = window.sessionStorage.getItem("loginUser");
      let userObject = JSON.parse(kes);
      //判断是否为超级管理  0是新增 1是修改，2是申请修改
      if (userObject.roleType == "root") {
        this.applyButton = 3;
      } else {
        this.applyButton = 2;
      }
      selectEmployeeProfileById(id).then((data) => {
        this.addEmployeeForm = data.data;
        this.imageUrl = data.data.employeeContractFile;
        this.imageUrl2 = data.data.employeeSecrecyFile;
        this.title = "编辑档案信息";
        this.getAllGoods();
        this.addFromDialog = true;
      });

      // updateEmployeeProfileByAdmin(id,this.applyStatus).then((data) => {
      //   if (data.code) {
      //     this.$message({
      //       type: "success",
      //       message: "操作成功",
      //     });
      //     this.getAllGoods();
      //   } else {
      //     this.$message({
      //       type: "error",
      //       message: data.message,
      //     });
      //   }
      // });
    },
    //编辑档案信息
    Employeeupda(userId) {
      this.imgstatus();
      let kes = window.sessionStorage.getItem("loginUser");
      let userObject = JSON.parse(kes);
      //判断是否为超级管理  0是新增 1是修改，2是申请修改
      if (userObject.roleType == "root") {
        this.applyButton = 1;
      } else {
        this.applyButton = 2;
      }
      selectEmployeeProfileById(userId).then((data) => {
        this.addEmployeeForm = data.data;
        this.imageUrl = data.data.employeeContractFile;
        this.imageUrl2 = data.data.employeeSecrecyFile;
        this.title = "编辑档案信息";
        this.getAllGoods();
        this.addFromDialog = true;
      });
    },
    //上传图片
    selectFile(i) {
      this.htdz = i;
      this.$refs.fileInput.click();
    },
    //上传oss
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
      if (this.htdz == 1) {
        this.imageUrl = URL.createObjectURL(this.selectedFile);
      }
      if (this.htdz == 2) {
        this.imageUrl2 = URL.createObjectURL(this.selectedFile);
      }
      this.uploadImage();
    },
    //初始化图片
    imgstatus() {
      let url =
        "https://kris-k.oss-cn-hangzhou.aliyuncs.com/kris/c179093a-41b0-4c70-bc1f-6e5973f35c98-jia.png";
      this.imageUrl = url;
      this.imageUrl2 = url;
    },
    //发送上传文件api
    uploadImage() {
      let formData = new FormData();
      formData.append("file", this.selectedFile);
      UploadFile(formData).then((data) => {
        let url = data.data;
        if (this.htdz == 1) {
          this.addEmployeeForm.employeeContractFile = url;
        }
        if (this.htdz == 2) {
          this.addEmployeeForm.employeeSecrecyFile = url;
        }
      });
    },
    //ReviewArchives 审核档案信息
    ReviewArchives(status) {
      updateEmployeeUpdateStatus(this.addEmployeeForm.id, status).then(
        (data) => {
          if (data.code) {
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.getAllGoods();
            this.addFromDialog = false;
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        }
      );
    },
    adkks(i) {
      this.ExamineType = i;
      this.getAllGoods();
    },
    // 查询列表
    getAllGoods() {
      this.loading = true;
      // getGoodsList(this.currentPage, this.pageSize)
      selectEmployeeProfileByState(
        this.currentPage,
        this.pageSize,
        this.ExamineType
      )
        .then((res) => {
          if (res.code) {
            this.total = res.data.total;
            this.tableData = res.data.employeeProfileVoList.map((item,index) =>{
				item.i = (this.currentPage - 1) * this.pageSize + index + 1;
				return item;
			});
            //将图片地址放入数组,需要遍历循环加入数组
            for (let i = 0; i < res.data.employeeProfileVoList.length; i++) {
              this.srcList.push(
                res.data.employeeProfileVoList[i].employeeContractFile
              );
              this.srcList2.push(
                res.data.employeeProfileVoList[i].employeeSecrecyFile
              );
            }
            console.log(this.tableData);
          } else {
            this.$message("列表加载错误");
          }
          console.log("获取商品列表");
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
    //在职状态
    employeeStatuse(i) {
      let val = "";
      if (i == 0) {
        val = "在职";
      }
      if (i == 1) {
        val = "离职";
      }
      return val;
    },

    //职工修改状态 0:已修改(第一次提交) 1:待审核 2:审核通过 3:审核失败
    employeeUpdateStatuse(i) {
      let val = "";
      if (i == 0) {
        val = "已修改";
      } else if (i == 1) {
        val = "待审核";
      } else if (i == 2) {
        val = "审核通过";
      } else if (i == 3) {
        val = "审核失败";
      }
      return val;
    },
    getGoodsCategory() {
      getGoodsCategory().then((res) => {
        this.gooodsCategory = res.data.map((item) => ({
          label: item.name,
          value: item.id,
        }));
        console.log("获取商品类别", res);
      });
    },
    // 删除商品
    deleteGoods(empl) {
      this.$confirm(
        `确定继续删除名为《${empl.employeeName}》的用户吗?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          deleteEmployeeProfileById(empl.id).then((res) => {
            if (res.code) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getAllGoods();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 编辑商品
    editGoods() {},
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}
.Category{
	height: 100%;
}
.goods-table {
  height: 94%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
